<template>
	<div>
		<div class="container">
			<div class="handle-box">
				
				<el-input v-model="query.awardName" placeholder="奖品名称" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" :icon="Plus"  @click="handleAdd">新增</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
			<el-table-column prop="awardId" label="奖品ID"  align="center"></el-table-column>
			<el-table-column prop="awardName" label="奖品名称"  align="center"></el-table-column>
				<el-table-column  label="奖品类型"  align="center">
					<template #default="scope">
					<span v-if="scope.row.awardType === 1">虚拟权益</span>
					<span v-else-if="scope.row.awardType === 2">兑换码</span>
					<span v-else-if="scope.row.awardType === 3">优惠券</span>
					<span v-else-if="scope.row.awardType === 4">实物商品</span>
					<span v-else>其他（{{ scope.row.awardType }}）</span>
					</template>
				</el-table-column>
				<el-table-column prop="awardContent" label="奖品内容"  align="center"></el-table-column>
				<el-table-column label="奖品图片" align="center">
					<template #default="scope">
						<el-image
							class="table-td-thumb"
							:src="scope.row.imgUrl"
							:z-index="10"
							:preview-src-list="[scope.row.imgUrl]"
							preview-teleported
						>
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间"  align="center"></el-table-column>
				<el-table-column prop="updateTime" label="修改时间"  align="center"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)" v-permiss="16">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageNum"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>
		<!-- 新增框弹出 -->
		<el-dialog title="新增" v-model="addVisible" width="50%">
			<el-form label-width="70px">
			
				<el-form-item label="奖品名称">
					<el-input v-model="addForm.awardName"></el-input>
				</el-form-item >
					<el-form-item label="奖品类型" >
						<!-- 奖品类型（1:虚拟权益、2:兑换码、3:优惠券、4:实物奖品） -->
						<el-select v-model="addForm.awardType" placeholder="奖品类型" class="handle-select mr10">
						<el-option key="0" label="--请选择--" value=""></el-option>
						<el-option key="1" label="虚拟权益" value="1"></el-option>
						<el-option key="2" label="兑换码" value="2"></el-option>
						<el-option key="3" label="优惠券" value="3"></el-option>
						<el-option key="4" label="实物奖品" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="奖品内容">
					<el-input v-model="addForm.awardContent"></el-input>
				</el-form-item>
				<el-form-item label="图片地址">
					<el-input v-model="addForm.imgUrl" placeholder="请输入图片地址"></el-input>
				</el-form-item>
			
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveAdd">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="30%">
			<el-form label-width="70px">

			<el-form-item label="奖品名称">
					<el-input v-model="editForm.awardName"></el-input>
				</el-form-item >
					<el-form-item label="奖品类型" >
						<!-- 奖品类型（1:虚拟权益、2:兑换码、3:优惠券、4:实物奖品） -->
						<el-select v-model="editForm.awardType" placeholder="奖品类型" class="handle-select mr10">
						<el-option key="0" label="--请选择--" value=""></el-option>
						<el-option key="1" label="虚拟权益" value="1"></el-option>
						<el-option key="2" label="兑换码" value="2"></el-option>
						<el-option key="3" label="优惠券" value="3"></el-option>
						<el-option key="4" label="实物奖品" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="奖品内容">
					<el-input v-model="editForm.awardContent"></el-input>
				</el-form-item>
				<el-form-item label="图片地址">
					<el-input v-model="editForm.imgUrl" placeholder="请输入图片地址"></el-input>
				</el-form-item>

			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { queryAwardList,addAward, editAward, deleteAwardById } from '../api/lottery';

interface TableItem {
	id:number;
	awardId: number;
	awardType: number;
	awardName: string;
	awardContent: string;
	createTime: string;
	updateTime: string;
}

const query = reactive({
	awardName: null,
	pageNum: 0,
	pageSize: 10
});
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
	queryAwardList(query).then(res => {
		console.log("查询奖品信息返回结果：res",res)
		tableData.value = res.data.awardVOList;
		pageTotal.value = res.data.count || 0;
	});
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};

// 删除操作
const handleDelete = (index: number, row: any) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			deleteAwardById(row.awardId).then((resp) => {
				if (resp.data.code == "0000") {
					ElMessage.success('删除成功');
					tableData.value.splice(index, 1);
				} else {
					ElMessage.warning(resp.data.info);
				}

			})
		})
		.catch(() => {});
};
// 新增弹出框
const addVisible = ref(false);
let addForm = reactive({
	awardType: '',
	awardName: '',
	awardContent: '',
	imgUrl: ''

});
const handleAdd = () => {
	addVisible.value = true;
	
};
const saveAdd = () => {
	addVisible.value = false;
	console.log("新增数据:" , JSON.stringify(addForm))
	addAward(addForm).then(res => {
			
			if(res.data.code === "0000"){
				ElMessage.success(res.data.info);
				getData();
			}else{
				ElMessage.error(res.data.info);
			}
			
		})

};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let editForm = ref({
	awardType: '',
	awardName: '',
	awardContent: '',
	imgUrl: ''
});

let idx: number = -1;
const handleEdit = (index: number, row: any) => {
	idx = index;
	editForm.value = row;
	editVisible.value = true;
};
const saveEdit = () => {
	editVisible.value = false;
	console.log("修改数据:" , JSON.stringify(editForm.value))
	// 调用后端更新
	editAward(editForm.value).then(res => {
		if(res.data.code === "0000"){
				ElMessage.success(res.data.info);
				getData();
			}else{
				ElMessage.error(res.data.info);
			}
	})
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
